
<!doctype html>
<html>
<head>
    <title>Demo &raquo; Using resize callbacks &raquo; gridster.js</title>
    <link rel="stylesheet" type="text/css" href="../dist/jquery.gridster.css">
    <link rel="stylesheet" type="text/css" href="../assets/demo.css">

    <style>
        #log {
            margin-top: 20px;
            max-height: 400px;
            overflow: auto;
            max-width: 250px;
            border: 1px solid #DDD;
        }
    </style>
</head>

<body>

<h1>Resize callbacks</h1>

<p>Resize some widgets and see the log below.</p>


<div class="gridster">
    <ul>
        <li data-row="1" data-col="1" data-sizex="2" data-sizey="2">0</li>
        <li data-row="1" data-col="3" data-sizex="1" data-sizey="2">1</li>
        <li data-row="1" data-col="4" data-sizex="1" data-sizey="1">2</li>
        <li data-row="3" data-col="2" data-sizex="3" data-sizey="1">3</li>
        <li data-row="4" data-col="1" data-sizex="1" data-sizey="1">4</li>
        <li data-row="3" data-col="1" data-sizex="1" data-sizey="1">5</li>
        <li data-row="4" data-col="2" data-sizex="1" data-sizey="1">6</li>
        <li data-row="5" data-col="2" data-sizex="1" data-sizey="1">7</li>
        <li data-row="4" data-col="4" data-sizex="1" data-sizey="1">8</li>
        <li data-row="1" data-col="5" data-sizex="1" data-sizey="3">9</li>
    </ul>
</div>

<h3>Log</h3>
<div id="log"></div>

<script type="text/javascript" src="../assets/jquery.js"></script>
<script src="../dist/jquery.gridster.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
    var gridster;

    $(function(){

        var log = document.getElementById('log');


        gridster = $(".gridster ul").gridster({
            widget_base_dimensions: [100, 55],
            widget_margins: [5, 5],
            resize: {
                enabled: true,
                start: function(e, ui, $widget) {
                    log.innerHTML = 'START position: ' + ui.position.top +' '+ ui.position.left + "<br >" + log.innerHTML;
                },

                resize: function(e, ui, $widget) {
                    log.innerHTML = 'RESIZE offset: ' + ui.pointer.diff_top +' '+ ui.pointer.diff_left + "<br >" + log.innerHTML;
                },

                stop: function(e, ui, $widget) {
                    log.innerHTML = 'STOP position: ' + ui.position.top +' '+ ui.position.left + "<br >" + log.innerHTML;
                }
            }
        }).data('gridster');


    });
</script>
</body>
</html>
